<template>
	<section>
		<div class="header">
			<header-bar></header-bar>
		</div>
		<div class="wrap sectionContentWrap" ref="section">
			<left-bar></left-bar>
			<!--start 间隔-->
			<div class="interval"></div>
			<!--end 间隔-->
      <!--内容区  start-->
			<div class="content" ref="content">
				<router-view></router-view>
  		</div>
      <!--内容区 end-->
		</div>
	</section>
</template>


<script>
import HeaderBar from '../../components/header/header'
import LeftBar from '../../components/leftBar/leftBar'

export default {
	data(){
		return {
			screenHeight:"",
			section: '',
      		slideBtnMsg:'全部订单'
		}
	},
	components:{HeaderBar,LeftBar},
	mounted(){
		this.$refs.content.style.height = (document.documentElement.clientHeight-64)+"px";
		this.section = document.querySelector('.sectionContentWrap').offsetHeight;
		this.screenHeight = document.documentElement.clientHeight;
		if(54<this.screenHeight-this.section){
			document.querySelector('.sectionContentWrap').style.height=(this.screenHeight-54)+'px'
		};
		window.onresize=()=>{
			if(document.querySelector('.sectionContentWrap')){
				this.section = document.querySelector('.sectionContentWrap').offsetHeight;
				this.screenHeight=document.documentElement.clientHeight
				if(54<this.screenHeight-this.section){
					document.querySelector('.sectionContentWrap').style.height=(this.screenHeight-54)+'px'
				};
			}
		};
	}
}
</script>

<style scoped>
  @import "../../assets/css/public.css";
	section {
		/*display: flex;*/
		flex-direction: column;
	}
	.header {
		flex:0 0 44px;
		width: 100%;
	}
	.wrap {
    display: flex;
    width: 100%;
    height: auto;
    flex: 1;
    box-sizing: border-box;
    flex-direction: row;
    align-items: stretch;
    padding: 10px 5px 0 10px;
		background: #f2f2f2;
		overflow: hidden;

	}
	.interval {
		flex-basis: 10px;
		background: #f2f2f2;
	}
	.content {
		flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    -webkit-transition: all .2s;
    transition: all .2s;
    min-height: calc(100% - 60px);
    min-width: 1000px;
	}
</style>
